<template>
    <div class="point" v-if="show">
        <div class="top_height"></div>
        <div class="top_nav">
            <img :src="zuo_jiantou" alt="" @click="clone">
            <span>扣点查询</span>
        </div>
        <div class="point_div">
            <div class="point_div_sloot">
                <div class="sloot_div">
                    <div class="sloot_div_item" v-for="(item, index) in dataArr" :key="index">
                        <div class="sloot_div_item_top">{{ item.title }}</div>
                        <div class="sloot_div_item_text">
                            <p v-for="ite in item.textArr" :key="ite">{{ ite }}</p>
                        </div>
                        <div class="sloot_div_item_bot">平台服务费：{{ item.number }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue'
import zuo_jiantou from '@/assets/porduct/zuo_jiantou.png'
defineProps(['mechanismArr', 'data', 'show'])
const emit = defineEmits(['clone', 'update:costPrice', 'update:costPrice2', 'update:costPrice3'])


const dataArr = ref([
    {
        title: '食品饮品',
        textArr: ['食品：坚果糖类、速食类、糕点类、豆制品类、休闲类、调味品类、原料类。', '冲调类：藕粉、麦片、食补粉、速溶咖啡、咖啡豆/粉、乳制品。', '液态类：饮料、水等。'],
        number: '2'
    },
    {
        title: '医疗保健',
        textArr: ['医疗器械：雾化器、健康检测、医用防护用品、制氧/储氧设配、血糖仪、心电/血氧仪、呼吸机、助听器、体温计、体外检测、理疗仪器。', '保健类：维C类、鱼油类、褪黑素等。'],
        number: '5'
    },
    {
        title: '珠宝配饰',
        textArr: ['珠宝：翡翠、和田玉、黄金、白银、琥珀、蜜蜡、珍珠、钻石等。', '手表、钟表等。'],
        number: '5'
    },
    {
        title: '茶酒生鲜',
        textArr: ['酒：啤酒、白酒、红酒、洋酒等 。', '茶叶：普洱、白茶、红茶、绿茶、黑茶、养生茶等。', '生鲜：水果、肉禽类、海鲜类、蔬菜类、预制菜类、冷冻/冷藏类等。'],
        number: '2'
    },
    {
        title: '鞋服箱包配饰',
        textArr: ['鞋：运动鞋、休闲鞋、情侣鞋、童鞋等。', '服装：男装、女装、情侣装、休闲装、妈妈装、内衣、家居服等。', '箱包：拉杆箱、男包、女包、双肩包等。', '配饰：皮带、帽子、围巾、手套等。'],
        number: '5'
    },
    {
        title: '个护清洁',
        textArr: ['湿厕纸、湿巾、纸抽、卷纸。'],
        number: '2.5'
    },
    {
        title: '个护清洁',
        textArr: ['口腔护理、身体护理、洗护类等。'],
        number: '5'
    },
    {
        title: '3C数码家电',
        textArr: ['数码：手机、电脑、照相机、智能设备、投影设备等。', '家电类：冰箱、电视、洗衣机、空调、电暖器等。'],
        number: '2'
    },
    {
        title: '美妆护肤',
        textArr: ['国际大牌、国内知名品牌'],
        number: '2'
    },
])

// 返回
const clone = () => {
    emit('clone')
}

</script>
<style lang="less" scoped>
.point {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 6009;
    background: #F6FAFF;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    

    .top_height {
        height: 50px;
        background: #fff;
    }

    .top_nav {
        height: 46px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-weight: 800;
        font-size: 16px;
        color: #1A1B1C;

        img {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 19px;
            height: 20px;
        }
    }

    .point_div {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-flow: column;

        .point_div_text {
            font-weight: 600;
            font-size: 14px;
            color: #1A1B1C;
            margin-bottom: 10px;
        }

        .point_div_form {
            padding: 15px 15px 0;
        }

        .point_div_sloot {
            flex: 1;
            min-height: 0;
            padding: 15px 15px 10px;
            display: flex;
            flex-flow: column;

            .sloot_div {
                flex: 1;
                min-height: 0;
                overflow-y: auto;

                &::-webkit-scrollbar {
                    display: none;
                }

                .sloot_div_item {
                    width: 345px;
                    min-height: 188px;
                    background: #FFFFFF;
                    border-radius: 5px;
                    padding: 15px;
                    display: flex;
                    flex-flow: column;
                    justify-content: space-between;
                    box-sizing: border-box;
                    margin-bottom: 10px;

                    .sloot_div_item_top {
                        font-weight: 600;
                        font-size: 14px;
                        color: #1A1B1C;
                        text-align: center;
                    }

                    .sloot_div_item_text {
                        flex: 1;
                        min-width: 0;

                        p {
                            font-weight: 400;
                            font-size: 12px;
                            color: #1C1D1E;
                            margin-bottom: 10px;
                        }
                    }

                    .sloot_div_item_bot {
                        font-weight: 600;
                        font-size: 14px;
                        color: #1A1B1C;
                        text-align: right;
                    }
                }
            }
        }
    }

    .foot {
        height: 84px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .foot_button {
            width: 345px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
        }
    }
}
</style>